<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>结构伪类选择器</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			div.box>div {
				height: 35px;
				border: 5px solid black;
				margin-bottom: 20px;
			}
			
			/*
				结构伪类选择器 odd代表奇数
			*/
			/*.box>div:nth-child(odd) {
				background-color: red;
			}*/
			
			/*
				even代表偶数
			*/
			/*.box>div:nth-child(even) {
				background-color: blue;
			}*/
			
			/* 选中box下面的第一个子元素 */
			/*.box>div:first-child {
				width: 50%;
			}*/
			
			/* 选中box下面的最后一个div子元素 */
			/*.box>div:last-child {
				width: 30%;
			}*/

			/* 选中box下面的第一个子元素并且是div */
			/*.box>div:nth-child(1) {
				margin: 0 auto 20px;
			}*/
			
			/*
				里面可以是包含n的简单公式
				n是从0开始逐渐递增的整数
				选中偶数子元素 2n
				选中奇数 2n+1
				选中3的倍数 3n
			*/
			/*.box>div:nth-child(2n+1) {
				background-color: red;
			}*/

			/*
				用法同nth-child, 只不过倒着数
			*/
			.box>div:nth-last-child(-n+5) {
				background-color: blue;
			}
			
			/*
				用法同nth-child, 只不过会过滤掉其它类型的元素
			*/
			/*.wrap>div:nth-of-type(odd) {
				background-color: orange;
			}*/
			
			/*
				选中 wrap下面的第一个类型为div的元素
			*/
			/*.wrap>div:first-of-type {
				width: 50%;
				background-color: orange;
			}*/

			/*.wrap>div:last-of-type {
				width: 20%;
				background-color: pink;
			}*/
			
			/*
				用法同nth-of-type,只不过是倒着数
			*/
			.wrap>div:nth-last-of-type(1) {
				width: 300px;
				background-color: purple;
			}


		</style>
	</head>
	<body>

		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
		</div>

		<div class="wrap">
			<p>我是p标签1</p>
			<div>我是div1</div>
			<a href="">我是a标签</a>
			<div>我是div2</div>
			<p>我是p标签2</p>
			<div>我是div3</div>
		</div>

		
	</body>
</html>